<template>
    <!--sss-->
  <div class="warper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in swiper" :key="item.id">
        <img :src="item.imgUrl">
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

    export default {
        name: "Swiper-vue",
        props:{
          swiper:Array
        },
        data(){
          return{
            swiperOption:{//
              pagination:".swiper-pagination",
              loop:true,
              autoplay:2000
            },
            // imgUrl:[
            //   {
            //     id:"001",
            //     url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/b421363bbbb9184deacb4247eeea7485.jpg_750x200_12b42643.jpg"
            //   },
            //   {
            //     id:"002",
            //     url:"http://img1.qunarzz.com/piao/fusion/1609/d4/a74059efafa0f902.png_750x200_d509f4ff.png"
            //   },
            //   {
            //     id:"003",
            //     url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/fdff7e5abe30ec5f014b4d7464e0c3ef.jpg_750x200_d1d693c8.jpg"
            //   }
            // ]
          }
        }

    }
</script>

<style scoped lang="stylus">
  .warper>>>.swiper-pagination-bullet-active {
    background :white!important;
  }
  .warper
    overflow hidden;
    widows 100%;
    height:0;
    padding-bottom:29.6666%;
    .swiper-slide
      img{
        width 100%;
      }


</style>
